<template>
  <div id="bodgrec">
        <el-form :label-position="labelPosition" ref="form" :model="form" class="gameSearW">
              <div style="display:flex;flex-wrap:wrap;">
                 <el-form-item label-width="170px" label="用户编号和用户名查询 :">
                   <el-input style="width:220px;" placeholder="用户编号和用户名查询" v-model="formpage.userName"></el-input>
                </el-form-item>
                <el-form-item label-width="90px" label="时间查询 :" style="margin-left:50px">
                  <el-date-picker style="width:220px;" class="top" @change="changeDate1" placeholder="开始时间" type="date" v-model="formpage.beginDate"></el-date-picker>
                  <span>~</span>
                  <el-date-picker style="width:220px;" class="top" @change="changeDate2" placeholder="结束时间" type="date" v-model="formpage.endDate"></el-date-picker>
                </el-form-item>
                 <el-form-item label-width="90px" label="筹码查询 :">
                      <div style="display:flex;">
                          <el-radio-group v-model="formpage.radio" size="medium" style="display:flex">
                            <div v-on:click="radioCancel()">
                              <el-radio style="height:35px" border label="投注筹码"></el-radio>
                            </div>
                            <div v-on:click="radioCancel()" style="margin-left:10px;">
                              <el-radio style="height:35px" border label="输赢筹码"></el-radio>
                            </div>
                          </el-radio-group>
                            <el-input v-model="input1" style="width:15vw;margin-left:2vw;margin-bottom:10px;" placeholder="筹码数量"></el-input>
                            <span class="spanSty">~</span>
                            <el-input v-model="input2" style="width:15vw;" placeholder="筹码数量"></el-input>
                            <el-button type="info" @click="resetAll" style="margin-left:20px;height:40px;margin-bottom:30px;">重置</el-button>
                            <el-button type="primary" @click="searchGameMessage" style="margin-left:10px;height:40px;margin-bottom:30px;" icon="el-icon-search">查询</el-button>
                    </div>
                </el-form-item>
              </div>
        </el-form>
        
         <el-table
            border
          :data="tableData3.list"
          style="width: 90%"
          max-height="360">
          <el-table-column
            fixed
            type="index"
            label="id">
          </el-table-column>
          <el-table-column
            prop="time"
            label="时间">
          </el-table-column>
          <el-table-column
            prop="userCode"
            label="编号">
          </el-table-column>
          <el-table-column
            prop="userName"
            label="用户名">
          </el-table-column>
           <el-table-column
            class="bettAin"
            prop="betting"
            label="投注筹码">
          </el-table-column>
            <el-table-column
            prop="winChip"
            label="输赢筹码">
          </el-table-column>
      </el-table>
        <div class="block" style="text-align: right;padding: 20px;">
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page.sync="tableData3.pageNumber"
              :page-size="tableData3.pageSize"
              layout="total, prev, pager, next"
              :total="tableData3.totalRow">
            </el-pagination>
          </div>
        <!--弹出框提示-->
        <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose">
          <span>{{message}}</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
        </el-dialog>
  </div>
</template>
<script>
   export default {
    data() {
      return {
        labelPosition: 'left',
        dialogVisible: false,
        message:'您查询的条件不存在！！！',
        radio: '1',
        input1:'',
        input2:'',
        tableData3: [],
        tableData:[
         
        ],
        form: {
          radio:'',
          userCode: '',
          beginDate: '',
          endDate: ''
        },
         formpage:{
           userName:'',
           radio:'',
          userCode: '',
          beginDate: '',
          endDate: '',
          upBetting:undefined,
          downBetting:undefined,
          upGetChip:undefined,
          downGetChip:undefined,
           name: '',
          payMatods:'',
          preStatus:'',
          date: '',
          pageSize: 5,
          pageNumber: 1,
          lottertyId: undefined
        },
        forms:[],
         page:{
          id:'',
          pageSize: 10,
          pageNumber: 1,
          lottertyId: undefined
        },
      }
    },
    created(){
      this.getGameRocord();
      // console.log($('.el-table_1_column_5'))
      // $(".el-table_1_column_5").css("color","yellow!important");
    //  $(".el-table_1_column_5").addClass("red")
    },
    methods:{
      // 重置按钮
      resetAll(){
        this.formpage.userName = '';
        this.formpage.beginDate = '';
        this.formpage.endDate = '';
        this.input1 = '';
        this.input2 = '';
        this.formpage.radio = '';
        this.searchGameMessage();
      },
      // 查询条件不存在弹出框函数
       handleClose(done) {
        this.dialogVisible = false;
      },
      handleCurrentChange (val) {
        this.formpage.pageNumber = val
        this.searchGameMessage('page')
      },
      // 获取比赛记录
     getGameRocord(){
         this.$api.getgameRecord(this.formpage).then(res=>{
            if(res.code=='000000'){
              this.tableData3 = res.data;
              // this.tableData3.pageSize=6;
            }
          })
     },
    //  查询比赛记录
    searchGameMessage(val){
      console.log(val)
      this.tab(this.formpage.beginDate,this.formpage.endDate)
      if(this.formpage.radio=='投注筹码'){
        this.formpage.upBetting = this.input1;
        this.formpage.downBetting = this.input2;
        this.formpage.upGetChip = undefined;
        this.formpage.downGetChip = undefined;
      }
      else if(this.formpage.radio=='输赢筹码'){
         this.formpage.upGetChip = this.input1;
        this.formpage.downGetChip = this.input2;
        this.formpage.upBetting = undefined;
        this.formpage.downBetting = undefined;
      }
      else{
         this.formpage.upGetChip = undefined;
        this.formpage.downGetChip = undefined;
        this.formpage.upBetting = undefined;
        this.formpage.downBetting = undefined;
      }
      if(val!="page"){
         this.formpage.pageNumber = 1;
      }
      
      console.log(this.formpage)
      this.$api.searchGameRecord(this.formpage).then(res=>{
        // console.log(res.data)
        if(res.code==='000000'){
          if(res.data.list.length==0){
            this.$alert('您所查询的内容不存在！！！', '查询错误', {dangerouslyUseHTMLString: true});

          }else{
            console.log('666666666666')
          console.log(res.data.list)
            //  if(this.form.userName.length>0){
                  this.tableData3 = res.data;
                // }else{
                //   this.getmessData();
                // }
            // 
          }
          
        }
      })
    },
    tab(date1,date2){
        var oDate1 = new Date(date1);
        var oDate2 = new Date(date2);
        if(oDate1.getTime() > oDate2.getTime()){
            this.$alert('您设置的时间范围不正确，请重新输入正确的时间范围', '查询错误', {dangerouslyUseHTMLString: true});
        } else {
            return
        }
    },
    changeDate1 (val) {
        val ? this.formpage.beginDate = Date.parse(val) : this.formpage.beginDate = undefined
      },
    changeDate2 (val) {
        val ? this.formpage.endDate = Date.parse(val) : this.formpage.endDate = undefined
      },
    radioCancel(){
      if(this.formpage.radio.length>1){
         this.formpage.radio = ''
      }
     
    }
    }
   }
</script>
<style>
  #bodgrec .gameSearW{
    min-width:1100px;
  }
  #bodgrec{
    margin:0 30px;
  }
  #bodgrec .block{
    width:90%;
  }
  #bodgrec .el-input__inner{
    width:100%!important;
  }
</style>